import React, { useState } from 'react';
import styles from './payment.module.css'; // 引入CSS模块
import { SubmitBar } from 'react-vant';
import { ShopCollect, Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';

const Payment = () => {
  const [selectedPayment, setSelectedPayment] = useState('');
  const navigate = useNavigate();

  return (
    <div>
      <div className={styles.paymentHeader}>
        <button className={styles.backButton} onClick={() => navigate('/productDetails')}>{"<"}</button>
        <span className={styles.headerTitle}>收银台</span>
      </div>

      <div className={styles.paymain}>
        <div className={styles.payitem}>
          <ShopCollect className={styles.ShopCollect} /> <p>子墨无敌店</p><Arrow />
        </div>
        <div className={styles.paylist}>
          <div className={styles.paychlist}></div>
          <div className={styles.paymentlist}><p style={{ width: '15rem' }}>游戏商店是无敌的你们都是垃圾菜鸟士大夫胜多负</p><p style={{ color: 'gray' }}>发货形式 * 手动发货<span className={styles.payspan}>￥560</span></p> </div>
        </div>
      </div>

      <div className={styles.paymentMethods}>
        <div className={`${styles.paymentMethod} ${selectedPayment === 'wechat' ? styles.selected : ''}`} onClick={() => setSelectedPayment('wechat')}>
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.633a09?rik=Ena9epHbP5MQkw&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2020%2f03%2f36365.jpg&ehk=nO5ZOTbmUWFgAe183zIsdBY0gWDyZdPYV%2fq%2bQktxD48%3d&risl=&pid=ImgRaw&r=0" alt="微信支付" className={styles.paymentIcon} />
          <span>微信支付</span>
          {selectedPayment === 'wechat' && <span className={styles.checkmark}>✔</span>}
        </div>
        <div className={`${styles.paymentMethod} ${selectedPayment === 'alipay' ? styles.selected : ''}`} onClick={() => setSelectedPayment('alipay')}>
          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.qQsY8ylS2EHo6NjdnFupVAHaHa?rs=1&pid=ImgDetMain" alt="支付宝" className={styles.paymentIcon} />
          <span>支付宝</span>
          {selectedPayment === 'alipay' && <span className={styles.checkmark}>✔</span>}
        </div>
        <div className={`${styles.paymentMethod} ${selectedPayment === 'balance' ? styles.selected : ''}`} onClick={() => setSelectedPayment('balance')}>
          <img src="https://img.88icon.com/download/jpg/20201118/06e4d8b70702d827f1b2e758de50318e_512_512.jpg!bg" alt="余额支付" className={styles.paymentIcon} />
          <span>余额支付</span>
          <span className={styles.balanceAmount}>¥ 50.00</span>
          {selectedPayment === 'balance' && <span className={styles.checkmark}>✔</span>}
        </div>
      </div>
      <div className="demo-submit-bar"><SubmitBar price={0 * 100} buttonText="提交订单" disabled = {selectedPayment  ? false : true} /></div>
    </div>
  );
};

export default Payment;